<template>
  <div class="user-avator-dropdown">
    <Dropdown @on-click="handleClick">
      <Avatar :src="userAvator" />
      <span class="span-user">{{userinfo.EmployeeName}}</span>
      <Icon :size="18" type="md-arrow-dropdown"></Icon>
      <DropdownMenu slot="list">
        <DropdownItem name="updatepwd">修改密码</DropdownItem>
        <DropdownItem name="logout">退出登录</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
import "./user.less";
import { mapActions } from "vuex";
export default {
  name: "User",
  props: {
    userAvator: {
      type: String,
      default: ""
    }
  },
  computed: {
    userinfo() { 
      return this.$store.state.user.userinfo;
    }
  },
  methods: {
    ...mapActions(["handleLogOut"]),
    logout() {
      this.handleLogOut().then(() => {
        this.$router.push({
          name: "login"
        });
      });
    },
    updatepwd() {
      this.$router.push({
        name: "updatepwd_page"
      });
    },
    handleClick(name) {
      if (name == "logout") {
        this.logout();
      } else if (name == "updatepwd") {
        this.updatepwd();
      }
    }
  }
};
</script>
